import React from "react";
import { PasswordPair } from "../../../utils/domain/keyword";
import { Button, Form, FormProps, Input, Modal } from "antd";

export const PasswordModal = (props: {
  item: PasswordPair;
  visible: boolean;
  onFinish: FormProps<PasswordPair>["onFinish"];
  cancel: () => void;
}) => {
  return (
    <Modal
      open={props.visible}
      footer={null}
      onCancel={props.cancel}
      destroyOnClose
    >
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={props.onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="ID"
          name="id"
          initialValue={props.item.id}
          hidden
        ></Form.Item>
        <Form.Item<PasswordPair>
          label="Account"
          name="account"
          rules={[{ required: true, message: "Please input your account!" }]}
          initialValue={props.item.account}
        >
          <Input />
        </Form.Item>

        <Form.Item<PasswordPair>
          label="Password"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
          initialValue={props.item.password}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<PasswordPair>
          label="Memo"
          name="memo"
          initialValue={props.item.memo}
        >
          <Input.TextArea />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};
